<template>
  <div class="container">
      <p class="head">汉服后台管理系统</p>
      <div class="main">
          <p class="p4">登录</p>
          <el-form >
                <el-form-item label="选择">
    <el-select v-model="region" placeholder="选择商家或者管理员登录">
      <el-option label="商家" value="sj"></el-option>
      <el-option label="管理员" value="gl"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="账号"><el-input v-model="adm.username"></el-input></el-form-item>
  <el-form-item label="密码"><el-input v-model="adm.password"></el-input></el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<div class="tozc" @click=" zc">没有账号?点击-->去注册</div>
      </div>


  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            adm:{
                username:"",
                password:""

            },
            region:""
        }
    },
    created(){
        // location.reload();
    },
    methods:{
        submitForm(){
            if(this.region == "sj"){
            axios.post('/stores/login',this.adm).then(({data}) => {
                console.log(data)
        if(data.success){
            alert("登录成功")
             sessionStorage.token = data.token;
            this.$router.push('/StoresSystem');
        }else{
            alert("登录失败")
        }
        })
            }
           if(this.region == "gl"){
              axios.post('/adm/login',this.adm).then(({data}) => {
                console.log(data)
        if(data.success){
            console.info(data)
            alert("登录成功")
             sessionStorage.token = data.token;
            this.$router.push('/AdmSystem');
        }else{
            alert("登录失败")
        }
        })
           }
           
        },
        zc(){
        this.$router.push('/register');
    }
    },
    
}
</script>

<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.container{
    width: 100%;
    height: 100%;
    background: #306A95;  /* fallback for old browsers */

overflow: hidden;
}
.main{
    height: 350px;
    width: 400px;
    background: white;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-200px;
/*设置为宽度的一半*/
    margin-top:-150px;

}
.head{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-top:50px;

}
.p4{
    text-align: center;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}
.el-input{
    width: 250px;
}
.el-form-item {
    margin-left: 45px;
}
.el-button{
    margin-left: 90px;
}
.tozc{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 15px;
    color: red;
    cursor: pointer;
}
</style>